<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>角色添加</title>
  <link rel="stylesheet" href="lib/css/animate.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/addActor.css">
  <script src="lib/js/jquery-1.12.4.js"></script>
  <script src="js/loginText.js"></script>
</head>

<body>
  <div class="myTable animate__animated animate__lightSpeedInRight">
    <form id="myForm">
      <div class="form-group">
        <label for="exampleInputEmail1">请输入角色名称</label>
        <input type="text" class="form-control" id="actor" placeholder="输入角色名称" name="name">
      </div>
      <div class="myForm form-group">
        <!-- todo -->

      </div>

      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
</body>

<!-- 表单渲染  -->
<script type="text/template" id="formData">

  <%for( i = 0; i < data.length; i++) {%>
    <div style="margin: 20px"><%=data[i].father%>:</div>
    <div style="margin-left: 40px">
      <%for( j = 0; j < data[i].sun.length; j++) {%>
            <input type="checkbox" id="inlineCheckbox1" value="<%=data[i].sun[j].name%>" name="<%=data[i].father%>"><%=data[i].sun[j].name%>
       <%}%>
      </div>
   <%}%>
</script>


<script>
  $(function () {

    // 表单提交事件
    $("#myForm").submit(function (e) {
      e.preventDefault()
      var name = $('#actor')[0].value.trim()
      if (!name) {
        window.alert('角色名称不能为空!')
        return
      }

      // 获取单选框内容
      var formData = $("#myForm").serializeArray()
      var data = {}
      console.log(formData)
      data.name = name
      data.menus = ''
      for (var i = 1; i < formData.length; i++) {
        if (formData[i].name === formData[i - 1].name) {
          data.menus += "|";
          data.menus += formData[i].value;
        } else {
          data.menus += "&";
          data.menus += formData[i].name + ":" + formData[i].value;
        }
      }
      var str = data.menus.replace('&', '')
      data.menus = str
      console.log(data)

      if (confirm("确认添加？")) {
        // 用户点击确定发送请求
        $.ajax({
          url: '/pages/actor/insert',
          type: 'post',
          data: JSON.stringify(data),
          dataType: 'json',
          contentType: 'application/json;charset=UTF-8',
          success: function (res) {
            console.log(res)
            if (res.success) {
              self.location = 'actor.html'
            } else {
              window.alert(res.error)
            }
          }
        })
      } else {
        return
      }
    })

    // 权限菜单渲染
    getAllCategoryAndSunCategory(function (res) {
      console.log(res)
      $('.myForm').html(template('formData', {
        data: res
      }))
    })
  })



  // 获取所有父菜单和子菜单。。。父菜单带子菜单函数封装
  function getAllCategoryAndSunCategory(callback) {
    $.ajax({
      url: '/pages/category/getAllCategoryAndSunCategory',
      type: 'post',
      data: '',
      dataType: 'json',
      contentType: 'application/json;charset=UTF-8',
      success: function (res) {
        callback && callback(res)
      }
    })
  }
</script>
<script src="lib/js/template-native.js"></script>
<script src="lib/js/bootstrap.js"></script>

<script src="lib/js/mock.js"></script>
<script src="mock/getAllActors.js"></script>
<script src="mock/addActor.js"></script>
<script src="mock/fatherAndSun.js"></script>

</html>